组合

表单组件的 Compact 模式。

何时使用

• 旨在提供更紧凑的布局，适用于需要节省空间的场景。
• 通常会减小输入框的高度、边距和内部填充，使多个组件可以更加紧凑地排列在一起。
• 在同一行上放置多个输入框时，能够确保它们的高度一致，提升视觉整齐感。

一、属性

1. 主要属性

1）外观 - 排列方向

排列方向：提供水平和垂直两种方向，默认水平。

• 排列方向 - 水平：组合内的组件从左到右排列。

  
  

• 排列方向 - 垂直：组合内的组件从上到下排列。

  

2）外观 - 尺寸

尺寸：提供大、中、小三种尺寸选择，默认中。

• 三种尺寸如下图所示：

  
  

3）外观 - 满宽

满宽：默认关闭。

• 关闭时：组合的宽度取决于内部组件的总宽度。

• 开启后：组合宽度将撑满整个父容器。

  
  
  

二、样式

无特殊样式配置，详见 通用样式。

三、常见使用场景

1. 搜索框

   在网站或应用的顶部导航栏中，使用紧凑的搜索框可以节省空间，同时提供用户快速搜索的功能。

   

2. 表单输入

   在用户注册、登录或填写调查问卷时，使用 Compact 输入框可以在有限的空间内展示更多输入项。

   

3. 设置面板

   在用户设置或配置面板中，使用 Compact 模式可以将多个设置项并排放置，提高可用性和用户体验。

   

4. 数据录入

   在数据录入界面中，使用 Compact 模式的输入框可以让用户在录入大量信息时减少视觉干扰。